<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>The Ajax 02 Page</h1>
    <fieldset>
        <legend>Ajax 表单请求</legend>
        <form>
            <input type="text" name="name" id="nameId" class="mingzi"  onblur="doCheck()"/>
            <button type="button" onclick="doSave()">Save</button>
        </form>
        <span id="result"></span>
    </fieldset>
</div>
</body>
<script>
   function doSave(){
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerHTML=xhr.responseText;
            }
        }
        let name = document.forms[0].name.value;
        console.log("name",name);
        let url = "http://localhost:1314/doSave";
        xhr.open("POST",url,true);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(`name=${name}`);
   }
   function doCheck(){
        let xhr = new XMLHttpRequest();
         xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                document.getElementById("result").innerHTML=xhr.responseText;
            }
        }
        let name = document.forms[0].name.value;
        console.log("name",name);
        let url=`http://localhost:1314/doCheck?name=${name}`;
        xhr.open("GET",url,true);
        xhr.send(null);
   }
</script>
</html>